<template>
	<view class="appBox">
		<view class="list-input">
			<form @submit.prevent="submit" report-submit='true'>
				<div class="item">
					<div class="acea-row row-middle">
						<input type="text" class="texts" placeholder="手机号" v-model="phone" required disabled />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<input type="number" class="texts" maxlength="6"  placeholder="输入验证码" v-model="msgCode" required />
						<!-- <view class="get" @click="code">获取</view> -->
						<button class="get" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
							{{ text }}
						</button>
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<input type="password" class="texts" maxlength="6" placeholder="交易密码" v-model="payPass" required />
					</div>
				</div>
			</form>
		</view>
		<button class="btn" @click="savePayPass">提交</button>
	</view>
</template>


<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		phoneRegisterReset,
		registerVerify
	} from '@/api/api.js';
	import {
		loginH5,
		loginMobile,
		savePayPass,
		registerReset,
		register,
		// getCodeApi,
		getUserInfo
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		mixins: [sendVerifyCode],
		name: 'tradPassword',
		data() {
			return {
				phone: "",
				msgCode: "",
				payPass: "",
			}
		},
		components: {},
		mounted() {
			//this.getCode();
		},
		onLoad: function(options) {
			let that = this;
			// 获取系统信息
			uni.getSystemInfo({
				success(res) {
					that.platform = res.platform;
				}
			});
			const {
				code,
				state,
				scope,
				back_url,
				appleShow
			} = options;
			that.options = options
			if (options.authKey) that.authKey = options.authKey
			if (options.appleShow) that.appleShow = options.appleShow
			this.getUserInfomation()
		},
		methods: {
			async code() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '手机号码不存在,无法发送验证码！'
				});
				await registerVerify(that.phone).then(res => {
					that.$util.Tips({
						title: res.message
					});
					that.sendCode();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},

			async getUserInfomation() {
				let that = this
				await getUserInfo().then(res => {
					this.phone = res.data.phone
					that.$store.commit("UPDATE_USERINFO", res.data);
				})
			},

			async savePayPass() {
				let that = this;
				if (!that.phone) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if (!that.msgCode) return that.$util.Tips({
					title: '请填写验证码'
				});
				if (!/^[\w\d]+$/i.test(that.msgCode)) return that.$util.Tips({
					title: '请输入正确的验证码'
				});
				if (!that.payPass) return that.$util.Tips({
					title: '请填写密码'
				});
				// if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password)) return that.$util.Tips({
				// 	title: '您输入的密码过于简单'
				// });
				savePayPass({
						phone: that.phone,
						msgCode: that.msgCode,
						payPass: that.payPass,
					})
					.then(res => {
						that.$util.Tips({
							title: "设置成功!"
						});
						that.getUserInfomation()
						setTimeout(() => {
						  uni.navigateBack(1);
						}, 2000);
						
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import url("../../../static/css/gstyle.scss");

	.appBox {
		background-color: #F5F6F7;
		height: 100%;
		padding: 33rpx 33rpx 16rpx 33rpx;

		.btn {
			margin-top: 458rpx;
		}

		.list-input {

			.item {
				border-bottom: 1px solid #F0F0F0;
				background: #fff;

				.row-middle {
					position: relative;
					padding: 0 25rpx;
					margin-top: 20rpx;

					.get {
						background: $theme-color;
						height: 56rpx;
						line-height: 56rpx;
						width: 169rpx;
						text-align: center;
						color: white;
						font-family: 59--Regular;
						font-size: 30rpx;
					}

					.texts {
						flex: 1;
						font-size: 28rpx;
						height: 89rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					input {
						flex: 1;
						font-size: 28rpx;
						height: 80rpx;
						line-height: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}


				}
			}

		}
	}

	page {
		background-color: #fff !important;
	}
</style>
